<template>
  <div id="app">
    <div id="map" ref="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <!-- 页面四角 -->
      <div class="Angle-lt"></div>
      <div class="Angle-rt"></div>
      <div class="Angle-lb"></div>
      <div class="Angle-rb"></div>
      <a href="#" id="popup-closer" class="ol-popup-closer">*</a>
      <div id="popup-content" class="popup-content"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
//引入
import 'ol/ol.css'
import Map from 'ol/Map'
import { Tile as TileLayer } from 'ol/layer'
import OSM from 'ol/source/OSM.js'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
//添加图标
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Point from 'ol/geom/Point'
import Feature from 'ol/Feature'
import Icon from 'ol/style/Icon'
import Style from 'ol/style/Style'
//引入弹窗
import Overlay from 'ol/Overlay'
import { transform, toLonLat } from 'ol/proj'
import { toStringHDMS } from 'ol/coordinate'

export default {
  name: 'openlayersitem',
  data () {
    return {
      //地图容器
      map: {},
      overlay: null,
      vectorLayer: null
    }
  },
  created () {},
  computed: {
    ...mapGetters(['sidebar'])
  },
  watch: {
    sidebar: {
      deep: true,
      // immediate: true,
      handler (newVal) {
        console.log(newVal)
        this.initMap()
        this.addPopup()
        if (newVal.opened) {
          //变化时返回原位
          this.currentOffset = 0
        } else {
          //变化时返回原位
          this.currentOffset = 0
        }
      }
    }
  },
  mounted () {
    this.initMap()
    this.addPopup()
  },
  methods: {
    //地图初始化方法
    initMap () {
      //用that代替this，防止某些位置this指向发生变化
      let that = this
      that.map = new Map({
        target: 'map', //挂载到id为map的div容器上
        layers: [
          new TileLayer({
            // source: new OSM()	//OSM地图
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
            // source: new XYZ({
            //     url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
            //     // url:'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1',
            //     // url:"http://t0.tianditu.gov.cn/img_w/wmts?" +
            //     // "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            //     // "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=fea556436d51919f4a429933897be3c1"
            //     // crossOrigin: 'anonymous'
            // }),
          })
        ],
        //设置视图，包括中心点，坐标系，默认缩放级别，最大、最小缩放级别
        view: new View({
          projection: 'EPSG:4326', //使用这个坐标系3857
          center: [119.271288, 26.119002], //深圳[114.064839, 22.548857]
          zoom: 12
          // minZoom:1,	//最小缩放级别
          // maxZoom:18	//最大缩放级别
        })
      })
      // console.log(that.map.getLayers())
      //创建矢量图层
      this.vectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          image: new Icon({
            src: 'https://openlayers.org/en/latest/examples/data/icon.png',
            scale: 0.5
          })
        })
      })
      //将图层添加到地图上
      that.map.addLayer(this.vectorLayer)
      // console.log(that.map.getLayers())
      const museumPoint = new Point([119.271288, 26.119002])
      const museumFeature = new Feature(museumPoint)
      this.vectorLayer.getSource().addFeature(museumFeature)
    },
    addPopup () {
      // 使用变量存储弹窗所需的 DOM 对象
      var container = document.getElementById('popup')
      var closer = document.getElementById('popup-closer')
      var content = document.getElementById('popup-content')

      // 创建一个弹窗 Overlay 对象
      this.overlay = new Overlay({
        element: container, //绑定 Overlay 对象和 DOM 对象的
        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
        autoPanAnimation: {
          duration: 250 //自动平移效果的动画时间 9毫秒
        }
      })
      // 将弹窗添加到 map 地图中
      this.map.addOverlay(this.overlay)
      let _that = this
      /**
       * 添加单击响应函数来处理弹窗动作
       */
      this.map.on('click', function (evt) {
        // "EPSG:3857", "EPSG:4326" 转换
        let coordinate = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
        // 点击尺 （这里是尺(米)，并不是经纬度）;
        let hdms = toStringHDMS(toLonLat(evt.coordinate)) // 转换为经纬度显示
        console.log(hdms, 'hdms')
        // content.innerHTML = `
        // <p>你点击了这里：</p>
        // <p>经纬度：<p><code> ${hdms}  </code> <p>
        // <p>坐标：</p>X：${coordinate[0]} &nbsp;&nbsp; Y: ${coordinate[1]}`;
        content.innerHTML = `
                <div style="display:flex;justify-content: space-between;">
                  <div style="color:#5FE;padding:0;font-size:18px;">蔚蓝大厦</div>
                  <img src="https://img.thgykj.com/thgy-file/XC/报警消息.png" style="width: 22px;height: 22px;">
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:20px;">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">单位地址:</div>
                  <div style="color:#fff;font-size:14px;">福州市鼓楼区梅峰路118号</div>
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:8px">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">消防责任人:</div>
                  <div style="color:#fff;font-size:14px;">王先生</div>
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:8px">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">联系电话:</div>
                  <div style="color:#fff;font-size:14px;">134567899</div>
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:8px">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">报警位置:</div>
                  <div style="color:#fff;font-size:14px;">蔚蓝大厦一楼楼梯口处</div>
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:8px">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">报警产生时间:</div>
                  <div style="color:#fff;font-size:14px;">2023-08-30 17:03:27</div>
                </div>
                <div style="display:flex;justify-content: flex-start;align-item:center;margin-top:8px">
                  <div style="color:#7A91BF;font-size:14px;margin-right:4px;">报警持续时间:</div>
                  <div style="color:#f00;font-size:14px;">10分钟32秒</div>
                </div>
                <div style="display:flex;justify-content:center;margin-top:20px;">
                  <div style="width:72px;height:28px;text-align:center;font-size:16px;color: #00F0FF;border: 1.5px solid #258DE0;background: radial-gradient(130.77% 130.77% at 50% 50%, #011C57 0%, #2797EA 100%);">处置</div>
                </div>`
        _that.overlay.setPosition(evt.coordinate) //把 overlay 显示到指定的 x,y坐标
      })
      /**
       * 为弹窗添加一个响应关闭的函数
       */
      console.log('closer', closer)
      closer.onclick = function () {
        _that.overlay.setPosition(undefined)
        closer.blur()
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}
::v-deep .ol-control button {
  display: none;
}
#app {
  //min-height: calc(100vh - 50px);
  width: 100%;
  height: 821px;
  position: relative;
  //overflow: none;
  // #map {
  //   height: 100vh;
  //   // min-height: calc(100vh - 50px);
  // }
}
.ol-popup {
  width: 364px;
  height: 288px;
  position: absolute;
  color: #fff;
  background: linear-gradient(180deg, #9d0000 0%, #810000 100%);
  padding: 16px;
  bottom: 20px;
  left: -184px;
  box-sizing: border-box;
  .Angle-lt {
    width: 6.148px;
    height: 7.827px;
    border-top: 2.25px solid #36fff8;
    border-left: 2.25px solid #36fff8;
    position: absolute;
    left: -1px;
    top: -1px;
  }
  .Angle-rt {
    width: 6.148px;
    height: 7.827px;
    border-top: 2.25px solid #36fff8;
    border-right: 2.25px solid #36fff8;
    position: absolute;
    right: -1px;
    top: -1px;
  }
  .Angle-lb {
    width: 6.148px;
    height: 7.827px;
    border-bottom: 2.25px solid #36fff8;
    border-left: 2.25px solid #36fff8;
    position: absolute;
    left: -1px;
    bottom: -1px;
  }
  .Angle-rb {
    width: 6.148px;
    height: 7.827px;
    border-bottom: 2.25px solid #36fff8;
    border-right: 2.25px solid #36fff8;
    position: absolute;
    right: -1px;
    bottom: -1px;
  }
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: #810000;
  border-width: 10px;
  left: 50%;
  transform: translate(-50%);
}
.ol-popup:before {
  border-top-color: #810000;
  border-width: 11px;
  left: 50%;
  transform: translate(-50%);
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.popup-content {
  //width: 400px;
}
.ol-popup-closer:after {
  content: '';
}
</style>
